<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="注册" left-text="" left-arrow @click-left="$router.go(-1)" />

        </header>
        <main class="content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
            <!--  justify-content是控制子元素在主轴方向上的排列方式 space-between两端对齐  center居中对齐  spce-around  space-evenly 均匀分布   -->
            
                <p style="text-align: center;">短信验证码登录</p>
                
           
        </main>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/uitle/requset'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router'
const username = ref('')
const password = ref('')
const router = useRouter()

const onSubmit = (values) => {
    
    request.post('/register', values).then(res => {
        if (res.data.code == 200) {
            // 提示登录成功
            showSuccessToast(res.data.message);
            // 存储token
            localStorage.setItem('token', res.data.token)
            // 存储用户信息
            localStorage.setItem('username', username.value)
            // 跳转页面
            
        } else {
            // 提示登录失败
            showFailToast(res.data.message);
        }
    })
}
</script>